<!-- /components/DateSwitcher.vue -->
<template>
  <view class="date-switcher">
    <view 
      class="btn prev-btn" 
      @click="handlePrevMonth"
      :style="btnStyle"
    >
      <text>{{ prevText }}</text>
    </view>
    
    <view class="date-display" :style="textStyle">
      {{ displayDate }}
    </view>
    
    <view 
      class="btn next-btn" 
      :class="{ disabled: isCurrentMonth }"
      @click="handleNextMonth"
      :style="btnStyle"
    >
      <text>{{ nextText }}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'DateSwitcher',
  props: {
    // 按钮文字配置
    prevText: {
      type: String,
      default: '上个月'
    },
    nextText: {
      type: String,
      default: '本月'
    },
    // 日期显示格式
    format: {
      type: String,
      default: 'YYYY-MM-DD'
    },
    // 自定义样式
    btnStyle: {
      type: Object,
      default: () => ({
        width: '150rpx',
        backgroundColor: '#4a90e2'
      })
    },
    textStyle: {
      type: Object,
      default: () => ({
        fontSize: '28rpx',
        color: '#333'
      })
    }
  },
  data() {
    return {
      currentDate: new Date(),
      today: new Date()
    }
  },
  computed: {
    displayDate() {
      const range = this.getDateRange();
      // 提取 start 和 end 的年月部分（假设格式为 YYYY-MM-DD）
      const startYearMonth = range.start.substring(0, 10); // "2025-07-01" -> "2025-07"
      const endYearMonth = range.end.substring(0, 10);     // "2025-08-15" -> "2025-08"
      return `${startYearMonth} 至 ${endYearMonth}`;
    },
    isCurrentMonth() {
      const currentYear = this.currentDate.getFullYear()
      const currentMonth = this.currentDate.getMonth()
      const todayYear = this.today.getFullYear()
      const todayMonth = this.today.getMonth()
      return currentYear === todayYear && currentMonth === todayMonth
    }
  },
  methods: {
    formatDate(date, isEndDate = false) {
      const year = date.getFullYear()
      const month = date.getMonth() + 1
      let day = date.getDate()
      
      if (!isEndDate && !this.isCurrentMonth) {
        day = 1 // 非本月开始日期固定为1号
      }
      
      return this.format
        .replace('YYYY', year)
        .replace('MM', month.toString().padStart(2, '0'))
        .replace('DD', day.toString().padStart(2, '0'))
    },
    handlePrevMonth() {
      const newDate = new Date(this.currentDate)
      newDate.setMonth(newDate.getMonth() - 1)
      this.currentDate = newDate
      this.emitChange()
    },
    handleNextMonth() {
      if (this.isCurrentMonth) return
      this.currentDate = new Date()
      this.emitChange()
    },
    getDateRange() {
      const startDate = new Date(
        this.currentDate.getFullYear(),
        this.currentDate.getMonth(),
        1
      )
      
      let endDate
      if (this.isCurrentMonth) {
        endDate = new Date(this.today)
      } else {
        endDate = new Date(
          this.currentDate.getFullYear(),
          this.currentDate.getMonth() + 1,
          0
        )
      }
      
      return {
        start: this.formatDate(startDate),
        end: this.formatDate(endDate, true),
        isCurrentMonth: this.isCurrentMonth,
        year: this.currentDate.getFullYear(),
        month: this.currentDate.getMonth() + 1
      }
    },
    emitChange() {
      this.$emit('change', this.getDateRange())
    },
    // 外部可调用的方法
    resetToCurrent() {
      this.currentDate = new Date()
      this.emitChange()
    }
  },
  created() {
    this.$nextTick(() => {
      this.emitChange()
    })
  }
}
</script>

<style lang="scss" scoped>
.date-switcher {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx;
  // background-color: #f8f8f8;
  border-radius: 12rpx;
  
  .btn {
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    border-radius: 8rpx;
    font-size: 26rpx;
    
    &.disabled {
      background-color: #cccccc !important;
      opacity: 0.6;
    }
    
    &:not(.disabled):active {
      opacity: 0.8;
    }
  }
  
  .date-display {
    flex: 1;
    text-align: center;
    padding: 0 20rpx;
  }
}
</style>